// drag-drop stuff

// globals
var ggSliding;
var ggYearStart = 1982;
var ggYearEnd = 2008;
var ggYears = ggYearEnd - ggYearStart;
var ggTimeLineLength = 470; // pixels
var ggSlider = document.getElementById('ggSlider');
var ggLabel = document.getElementById('ggLabel');

var ggSliderStart = 0; // initial 'left' position of slider
var ggMouseStart = 0; // initial x- coordinate of the mouse at mouse down.

function ggMouseDown(event) {
  ggSliding = true;
	ggSliderStart = parseInt(ggSlider.offsetLeft);
  ggMouseStart = event.pageX;
	document.addEventListener('mousemove', ggMouseMove, true);
	document.addEventListener('mouseup', ggMouseUp, true);
}

function ggMouseMove(event) {
	if (ggSliding) {
    left = ggSliderStart + event.pageX - ggMouseStart;
    left = Math.min(left, ggTimeLineLength);
    left = Math.max(0, left);
    year = ggYearStart + Math.round(left * ggYears / ggTimeLineLength);
    ggSlider.style.left = left;
    ggLabel.innerHTML = year;
  }

  return false;
}

function ggMouseUp() {
	ggSliding = false;
  document.removeEventListener('mousemove', ggMouseMove, true);
  document.removeEventListener('mouseup', ggMouseUp, true);
}

// Create the timeline
function Tick(left) {
  var tick = document.createElement('div');
  tick.setAttribute('class', 'ggTick');
  tick.style.left = left;
  return tick;
}

function Year(left, year) {
  var label = document.createElement('div');
  label.setAttribute('class', 'ggYear');
  label.style.left = left - 10;
  label.appendChild(document.createTextNode(year));
  return label;
}

var tickline = document.getElementById("ggTickLine");
var interval = 470 / ggYears;
for (var year = ggYearStart; year <= ggYearEnd; year++) {
  var label = ((year == ggYearStart && year % 10 < 6) || year % 10 == 0 ||
                year == ggYearEnd);
  var left = 15 + Math.round((year - ggYearStart) * interval);
  if (label) {
   tickline.appendChild(new Year(left, year));
  } else {
   tickline.appendChild(new Tick(left));
  }
}
